<template>
    <div>
        <blur :blur-amount=40 :url="user.headimgurl" :height="135">
            <flexbox>
                <flexbox-item>
                    <router-link to="/home/ucenter" >
                    <img class="headimg" :src="user.headimgurl" >
                    </router-link>
                </flexbox-item>
                <flexbox-item><span class="name">{{user.nickname}}</span></flexbox-item>
                <flexbox-item></flexbox-item>
            </flexbox>
        </blur>
    </div>
</template>

<script>
import { Blur, Flexbox , FlexboxItem } from 'vux'


import Global from 'touch/config/global';
import Axios from 'touch/config/axios';

export default {

    components: {
        Blur,
        Flexbox,
        FlexboxItem,
    },
    data () {
        return {
            user : {
                headimgurl : this.Global.user.headimgurl,
                nickname : this.Global.user.nickname,
            }
        }
    },
    methods :{
        refresh(){
            this.user.headimgurl =  this.Global.user.headimgurl;
            this.user.nickname = this.Global.user.nickname;
        }
    },
    created: function(){
        //获取用户基本信息
        Axios.Home.BaseInfo({path:this.$route.path})
        .then(res =>{
            if(!res) return false;
            var data = res.data;
            this.Global.user.nickname = data.nickname;
            if(data.headimgurl!=''){
                this.Global.user.headimgurl = data.headimgurl;
            }
            this.refresh();
        })
    },
}
</script>

<style scoped>
.headimg {width: 60px; height: 60px; border-radius: 50%; border: 4px solid #ececec; margin-left: 15px; margin-top: 30px;}
.name{color: white;}
</style>